<template>
  <div>
    <a-page-header class="pt-0" @back="back" :title="t('填写表单')"></a-page-header>
    <a-spin :spinning="table.loading" class="w-[100%]">
      <a-form
        layout="vertical"
        @finish="submit"
        :rules="formRules"
        ::label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :model="form"
        ref="formRef"
      >
        <a-form-item>
          <div class="flex justify-between mb-4 px-8">
            <div>{{ t('基站列表') }}</div>
            <a-button @click="getStations" :loading="stationTable.loading">
              {{ t('刷新') }}
            </a-button>
          </div>
          <a-table
            :columns="stationColumns"
            :data="stationTable.data"
            :loading="stationTable.loading"
          >
            <template #bodyCell="{ record, column }">
              <template v-if="column.key === 'operation'">
                <a-button type="text" @click="selectItem(record)">选择</a-button>
              </template>
            </template>
          </a-table>
        </a-form-item>

        <a-form-item :label="t('基站名称')" name="stationName">
          <a-input allow-clear v-model:value="form.stationName" />
        </a-form-item>

        <a-form-item :label="t('基站编码')" name="stationNum">
          <a-input allow-clear v-model:value="form.stationNum" />
        </a-form-item>

        <a-form-item :label="t('基站IP')" name="stationIp">
          <a-input allow-clear disabled v-model:value="form.stationIp" />
        </a-form-item>

        <a-form-item label="Mac" name="mac">
          <a-input allow-clear disabled v-model:value="form.mac" />
        </a-form-item>

        <div class="flex gap-4">
          <a-button type="primary" htmlType="submit">{{ t('保存') }}</a-button>
          <
          <a-button @click="reset">{{ t('重置') }}</a-button>
        </div>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import type { IResponse } from '@/api/config/types';
import { list } from '../data/curd';
import { allowEditMenu, table } from '../data/data';
import { formRef, form, formRules } from '../data/form';
import { stationColumns } from '../data/columns';
import { getStationNews } from '@/api/modules/esl/station';
import { useTable } from '@/hooks/table';

const { t } = useI18n();
const stationTable = useTable();
const back = () => {
  allowEditMenu.value = false;
  reset();
};

const getStations = async () => {
  stationTable.value.loading = true;
  const { data } = await getStationNews();
  stationTable.value.data = data.data;
  stationTable.value.loading = false;
};
onMounted(async () => {
  getStations();
});
const selectItem = (data: any) => {
  console.log(data);
};
const submit = async () => {
  table.value.loading = true;
  let result: IResponse | undefined = undefined;
  if (!form.value.stationId) {
    /* 添加 */
  } else {
    /* 修改 */
  }
  await list();
  back();
};
const reset = () => {
  formRef.value?.resetFields();
};
</script>

<style lang="scss" scoped></style>
